var OrderDetail = function () {
  var template = /*html*/ `
    <div class="order-detail" v-loading.fullscreen.lock="loading">
      <div class="table-head">
        <span>建议采购日期：</span>
        <span style="color:#0000ff;">{{expectDate.proposalPurchaseTime}}</span>
        <span style="margin-left:40px;">预计完成日期：</span>
        <span style="color:#0000ff;">{{expectDate.estimateTime}}</span>
        <span style="color:#0000ff;margin-left:10px;" v-if="expectDate.rangeDate!==undefined">
          <template v-if="expectDate.rangeDate>=0">
          提前{{expectDate.rangeDate}}天
          </template>
          <template v-else>
          拖期{{-expectDate.rangeDate}}天
          </template>
        </span>
      </div>
      <div style="margin-top:10px;">
        <el-table border fit :data="detailList" style="width: 100%" :row-class-name="detailRowClassName">
          <el-table-column sortable prop="rowIndex" label="订单序号" min-width="100px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.rowIndex==='-1'?globalConfig.orderDefaultRowIndex:scope.row.rowIndex}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="materialType" label="类型" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="color" label="编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="colorDescription" label="描述" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="orderTotal" label="订单数" min-width="100px" align="center"></el-table-column>
          <el-table-column sortable prop="feedTotal" label="订单投料数" min-width="120px" align="center"></el-table-column>
          <el-table-column sortable prop="feedCount" label="投料单投料数" min-width="140px" align="center"></el-table-column>
          <el-table-column sortable label="采购" prop="purchaseStatus" min-width="90px" align="center">
            <template slot-scope="scope">
              <span>{{getPurchaseStatus(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="采购数" min-width="61px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.purchaseStatus == -1 || scope.row.purchaseStatus == -2">{{scope.row.reportCount}}</span>
              <span v-else>{{scope.row.purchaseCount}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库数" min-width="61px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.inStatus == -1 || scope.row.inStatus == -2">{{scope.row.reportCount}}</span>
              <span v-else>{{scope.row.inCount}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:20px;">
        <div class="pro-process-title clearfix">
          <div>生产进度：</div>
          <div>订单编号:{{order.showOrderId}}</div>
          <div>工厂型号:{{order.factoryId}}</div>
        </div>
        <div v-for="proProcess in proProcessList" :key="'proProcess_'+proProcess.id" class="pro-process">
          <div>
            <el-tag type="danger">{{proProcess.name}}</el-tag>
          </div>
          <div class="process-item">
            <template v-for="process in proProcess.processList">
            <el-button :key="'process_'+process.id" :type="getBtnType(process)" size="small" @click="processReport(proProcess,process)">
              {{process.processName}}
            </el-button>
            </template>
          </div>
        </div>
      </div>
      
      <el-dialog append-to-body :title="dialogTitle" :visible.sync="openProReport" :lock-scroll="true" :show-close="true" 
        custom-class="sysAddFormDialog" @closed="proReportClose">
        <div style="height: 55vh;overflow: auto;">
          <pro-report v-if="openProReport" :pro-reports="proReportList"></pro-report>
        </div>
        <div slot="footer">
          <el-button @click="openProReport=false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },
    data: function () {
      return {
        loading: false,
        openProReport: false,
        expectDate: {},
        detailList: [],
        proProcessList: [],
        proReportList: [],
        dialogTitle: ''
      };
    },
    created: function () {
      var orderId = this.order.orderId;
      this.initExpectDate(orderId);
      var promiseFun = [
        this.setDetailList(orderId),
        this.setProProcessList(orderId)
      ];
      var self = this;
      this.loading = true;
      Promise.all(promiseFun).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },
    methods: {
      initExpectDate: function (orderId) {
        var setting = {
          "isSetOrderDept": "订单生产部门未设置",
          "isSetDayCapacity": "部门日产能未设置",
          "isSetProcedutionFlow": "部门流程周期未设置",
          "materialHave": "物料信息不全"
        };

        var self = this;
        return ajaxRequest('expectDate/getExpectDate', {
          orderId: orderId
        }).then(function (expectDate) {
          var titles = [];
          for (var key in setting) {
            var value = expectDate[key];
            if (value === 2) {
              titles.push(setting[key]);
            }
          }

          var estimateTime = expectDate.estimateTime;
          if (moment(estimateTime).isValid()) {
            estimateTime = moment(estimateTime).valueOf();
            var jiaoDate = self.order.jiaoDate;
            var rangeDate = moment(jiaoDate).diff(estimateTime, 'day');
            expectDate.rangeDate = rangeDate;
          }
          self.expectDate = expectDate;
          self.$emit('change-title', titles);
          return expectDate;
        }).catch(function () {
          return null;
        });
      },
      setDetailList: function (orderId) {
        var self = this;
        return ajaxRequest('order/getOrderInfoDetail', {
          orderId: orderId
        }).then(function (detailList) {
          for (var i = 0; i < detailList.length; i++) {
            var detail = detailList[i];
            var rowIndex = detail.rowIndex;
            rowIndex = Number(rowIndex);
            if (rowIndex === -1) {
              rowIndex = 0;
            }
            detail.rowIndex = rowIndex;
          }
          self.detailList = detailList;
          return detailList;
        }).catch(function () {
          return [];
        });
      },
      setProProcessList: function (orderId) {
        var self = this;
        return ajaxRequest('orderProcedureTemplate/getAleradyReportProcedure', {
          orderId: orderId
        }).then(function (proProcessList) {
          proProcessList = _.map(proProcessList, function (proProcess) {
            var obj = {
              id: proProcess.id,
              name: proProcess.workshopName
            };

            obj.processList = _.map(proProcess.processList, function (process) {
              return {
                id: process.id,
                processName: process.processName,
                isReport: process.isReport
              };
            });
            return obj;
          });
          self.proProcessList = proProcessList;
          return proProcessList;
        }).catch(function () {
          return [];
        });
      },
      detailRowClassName: function (option) {
        var detail = option.row;
        var rowIndex = detail.rowIndex;
        if (rowIndex % 2 === 0) {
          return 'row-odd';
        } else {
          return 'row-even';
        }
      },
      processReport: function (proProcess, process) {
        var postData = {
          orderId: this.order.orderId,
          procedureId: process.id,
          workShop: proProcess.id
        };
        var isReport = process.isReport;
        switch (isReport) {
          case 1:
          case 2: {
            this.proReport(postData, process);
            break;
          }
          default: {
            this.proExpectReport(postData);
          }
        }
      },
      proExpectReport: function (postData) {
        var self = this;
        this.loading = true;
        ajaxRequest('expectDate/getProcedureExpectDate', postData).then(function (date) {
          self.loading = false;
          self.$alert(`预计生产日期：${date}`, '信息');
        }).catch(function () {
          self.loading = false;
        });
      },
      proReport: function (postData, process) {
        var self = this;
        this.loading = true;
        ajaxRequest('orderProcedureTemplate/getProcedureReport', postData).then(function (proReportList) {
          self.proReportList = proReportList;
          self.dialogTitle = process.processName;
          self.openProReport = true;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },
      proReportClose: function () {
        this.proReportList = [];
      },
      getPurchaseStatus: function (detail) {
        var text = '';
        switch (detail.purchaseStatus) {
          case 1:
            text = '是';
            break;
          case 2:
            text = '否';
            break;
          case -1:
            text = '部分报工';
            break;
          case -2:
            text = '已报工';
            break;
          case 3:
            text = '无需采购';
            break;
          case 4:
            text = '结单';
            break;
          case 5:
            text = '库存匹配';
            break;
        }
        return text;
      },
      getBtnType: function (process) {
        var isReport = process.isReport;
        var type;
        switch (isReport) {
          case 1: {
            type = 'success';
            break;
          }
          case 2: {
            type = 'warning';
            break;
          }
          default: {
            type = 'default';
          }
        }
        return type;
      }
    },
    components: {
      ProReport: ProReport
    },
    template: template
  };
}();
